<div data-bind="visible: profiles.items().length > 0" style="display: none">
    <div class="pull-right">
        <small>{{ _('Sort by') }}: <a href="#" data-bind="click: function() { profiles.changeSorting('id'); }">{{ _('Identifier') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { profiles.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a></small>
    </div>
    <table class="table table-striped table-hover table-condensed table-hover">
        <thead>
        <tr>
            <th class="settings_plugin_curalegacy_profiles_key">{{ _('Identifier') }}</th>
            <th class="settings_plugin_curalegacy_profiles_name">{{ _('Name') }}</th>
            <th class="settings_plugin_curalegacy_profiles_actions">{{ _('Actions') }}</th>
        </tr>
        </thead>
        <tbody data-bind="foreach: profiles.paginatedItems">
        <tr data-bind="attr: {title: description}">
            <td class="settings_plugin_curalegacy_profiles_key"><span class="fa fa-star" data-bind="invisible: !isdefault()"></span> <span data-bind="text: key"></span></td>
            <td class="settings_plugin_curalegacy_profiles_name" data-bind="text: name"></td>
            <td class="settings_plugin_curalegacy_profiles_actions">
                <a href="#" class="fa fa-star" title="{{ _('Make default') }}" data-bind="enable: !isdefault(), css: {disabled: isdefault()}, click: function() { if (!$data.isdefault()) { $root.makeProfileDefault($data); } }"></a>&nbsp;|&nbsp;<a href="#" class="fa fa-trash-o" title="{{ _('Delete Profile') }}" data-bind="enable: !isdefault(), css: {disabled: isdefault()}, click: function() { if (!$data.isdefault()) { $root.removeProfile($data); } }"></a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination pagination-mini pagination-centered">
        <ul>
            <li data-bind="css: {disabled: profiles.currentPage() === 0}"><a href="#" data-bind="click: profiles.prevPage">«</a></li>
        </ul>
        <ul data-bind="foreach: profiles.pages">
            <li data-bind="css: { active: $data.number === $root.profiles.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.profiles.changePage($data.number); }"></a></li>
        </ul>
        <ul>
            <li data-bind="css: {disabled: profiles.currentPage() === profiles.lastPage()}"><a href="#" data-bind="click: profiles.nextPage">»</a></li>
        </ul>
    </div>
</div>
